<template>
  <ul class="menu">
    <li>
      <div @click="expan">
        <i class="mu-icon-success"></i>
        <span>用户管理</span>
        <i class="mu-icon-down"></i>
      </div>
      <ul ref="list">
        <li>用户列表</li>
        <li>权限列表</li>
      </ul>
    </li>
    <li>
      <div>
        <i class="mu-icon-success"></i>
        <span>用户管理</span>
        <i class="mu-icon-down"></i>
      </div>
      <ul>
        <li>用户列表</li>
        <li>权限列表</li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  name: "mu-menu",
  methods: {
    expan() {
      this.$refs.list.classList.add("show");
    },
  },
};
</script>

<style scoped lang="scss">
.show {
  max-height: 200px !important;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu {
  border: 1px solid red;
  display: inline-block;
  font-size: 13px;

  li {
    cursor: pointer;

    ul {
      max-height: 0;
      overflow: hidden;
      transition: max-height 3s;

      li {
        padding: 20px 0 20px 70px;

        &:hover {
          background: #efefef;
        }
      }
    }

    div {
      padding: 13px 15px 13px 30px;

      span {
        margin: 0 50px 0 5px;
      }

      &:hover {
        background: #efefef;
      }
    }
  }
}
</style>